<template>
    <div class="user-search-list-container">

        <div class="bac-container-none-padding">
            <!--搜索条件-->
            <filter-box :data="filterData" :other-data="otherData" placeholder="搜索名称/公司名/标签"
                        @change="paramsChange"  ref="filterBox"></filter-box>
        </div>
        <!--列表-->
        <div class="bac-container-none-padding">
            <ul class="user-list" v-infinite-scroll="load">
                <li v-for="(user,index) in userList" :key="index" class="user-item">
                    <el-row>
                        <el-col :span="2" class="user-avatar">
                            <div @click="openHome(user.userId)">
                                <el-avatar :size="50" :src="user.headUrl"  >
                                </el-avatar>
                            </div>
                        </el-col>
                        <el-col :span="21" class="user-data">
                            <div class="user-name"><span @click="openHome(user.userId)"> {{user.realName}}</span> &nbsp;
                                <el-tag type="danger" size="mini" effect="plain" v-if="user.type == 1">v</el-tag>
                                <el-tag type="danger" size="mini" effect="plain" v-if="user.creditLevel == 1">实名
                                </el-tag>
                            </div>
                            <ul class="user-data-item">
                                <li v-if="user.subCategoryName != null && user.parentCategoryName != null">
                                    <span>行业：</span>
                                   {{user.subCategoryName == null ? user.subCategoryName :
                                        user.parentCategoryName}}
                                </li>
                                <li v-if="user.cityName != null">
                                    <span>城市：</span>
                                    {{user.cityName}}
                                </li>
                                <li v-if="user.profession != null">
                                    <span>职位：</span>
                                    <el-link :underline="false"@click="setLikeStr(user.profession)">{{user.profession}}</el-link>
                                </li>
                            </ul>
                            <ul class="user-data-item" v-if="user.company != null">
                                <li>
                                    <span>公司：</span>
                                    <el-link :underline="false" @click="setLikeStr(user.company)">{{user.company}}</el-link>
                                </li>
                            </ul>
                            <ul class="user-data-item "
                                v-if="user.dynamicQuantity != null && user.friendQuantity != null && user.fansQuantity != null ">
                                <li>
                                    <span>动态：</span>
                                    <el-link type="primary"  :underline="false">{{user.dynamicQuantity == null ? 0 :
                                        user.dynamicQuantity}}
                                    </el-link>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>人脉：</span>
                                    <el-link type="primary"  :underline="false">{{user.friendQuantity == null ? 0 :
                                        user.friendQuantity}}
                                    </el-link>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>粉丝：</span>
                                    <el-link type="primary" :underline="false">{{user.fansQuantity == null ? 0 :
                                        user.fansQuantity}}
                                    </el-link>
                                </li>
                            </ul>
                            <div class="user-data-item user-synopsis" v-if="user.synopsis != null">
                                <span>简介：</span>{{user.synopsis}}
                            </div>
                            <div class="user-data-item" v-if="user.tagList != null">
                                <span>标签：</span>
                                <el-link class="user-tag" :underline="false" type="primary" @click="setLikeStr(tag)"
                                         v-for="(tag,tIndex) in user.tagList" :key="tag">{{tag}}
                                </el-link>
                            </div>
                            <div class="user-operate">
                                <el-button type="primary" size="mini" @click="userConcernAdd(user)"
                                           :loading="user.addLoading" v-if="user.concernUserId == null"><i
                                        class="el-icon-plus"></i>关注
                                </el-button>
                                <el-button size="mini" type="primary" plain v-else >{{user.isEachOther ? '已互关' : '已关注'}}</el-button>
                            </div>

                        </el-col>
                    </el-row>
                </li>

            </ul>
            <div class="empty-container" v-if="userList.length == 0">
                <div class="bottom-text">{{loading == false ? '暂无搜索结果' : '加载中'}}</div>
            </div>
        </div>
        <el-alert
                v-if="userList.length > 0"
                :title="loading == false && loadFlag == false ? '没有更多了' : '加载中...'"
                center
                :closable="false"
                type="success">
        </el-alert>
    </div>

</template>


<script>
    import filterBox from '@/components/filter-box.vue'
    import common from '@/api/common';
    import util from '@/utils/commonUtil';

    export default {
        components: {
            "filter-box": filterBox
        },
        data: function () {
            return {
                loadFlag: true,
                loading: false,
                params: {
                    likeStr:"",
                    page: 1,
                    size: 20,
                    count: 0
                },
                paramsIndex: [1, 0, 0, 0, 0],
                currentClassification: {},
                filterData: [
                    {
                        name: "行业",
                        sublist: []
                    },
                    {
                        name: "地区",
                        sublist: []
                    }
                ],
                otherData: [
                    {
                        name: "排序",
                        sublist: [
                            {
                                code: "",
                                name: "综合"
                            },
                            {
                                code: "dynamic",
                                name: "动态量"
                            },
                            {
                                code: "friend",
                                name: "人脉量"
                            },
                            {
                                code: "fans",
                                name: "粉丝人数"
                            }
                        ],
                    }
                ],
                userList: []
            }
        },
        methods: {
            getFilterData() {
                common.industryCategoryQueryAll().then(res => {
                    this.filterData[0].sublist = res.data;
                });
                common.areaQueryAll().then(res => {
                    this.filterData[1].sublist = res.data;
                });

            },

            initData() {
                this.loading = true;
                this.$post("/user/concern/queryUserPage", this.params).then(res => {
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loading = false;
                        this.loadFlag = false;
                        return;
                    }
                    res.data.rows.forEach(u => {
                        u.headUrl =util.setDefaultHead(u.headUrl) ;
                        if (u.tags) {
                            u.tagList = u.tags.split(',');
                        }
                        u.addLoading = false;
                    })
                    this.userList = this.userList.concat(res.data.rows);
                    this.params.count = res.data.count;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            load() {
                if ((this.loadFlag == false && this.params.count == this.userList.length) || this.loading) {
                    return;
                }
                this.params.page++;
                this.initData();
            },
            paramsChange(r, o, likeStr) {
                this.params = {
                    page: 1,
                    size: 20,
                    count: 0
                }
                if (r[0].length > 0 && r[0][0]) {
                    this.params.parentCategoryCode = r[0][0].code
                }
                if (r[0].length > 0 && r[0][1]) {
                    this.params.subCategoryCode = r[0][1].code
                }
                if (r[1].length > 0 && r[1][0]) {
                    this.params.provinceCode = r[1][0].code
                }
                if (r[1].length > 0 && r[1][1]) {
                    this.params.cityCode = r[1][1].code
                }
                if (o != null && o[0]) {
                    this.params.sortField = o[0].code;
                }
                this.loadFlag = true;
                this.params.likeStr = likeStr;
                this.userList = [];
                this.initData();

            },
            userConcernAdd(user) {
                user.addLoading = true;
                this.$post("/user/concern/add", {
                    concernUserId: user.userId
                }).then(res => {
                    user.concernUserId = res.data.concernUserId
                    user.isEachOther = res.isEachOther;
                    user.addLoading = false;
                }).catch(() => {
                    user.addLoading = false;
                })
            },
            openHome(id) {
                this.$router.push({
                    path: "/home",
                    query: {
                        id: id
                    }
                })
            },
            setLikeStr(likeStr){
                this.$refs.filterBox.like(likeStr);
            }
        },
        mounted() {
            this.getFilterData();
            this.initData();
        }
    }
</script>
<style>

</style>